<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <table-container>
    <lg-table :schema="schema" v-bind="tableProps">
      <template #startTime="{ data }">
        <lg-range-date
          v-model:start="data.startTimeMin"
          v-model:end="data.startTimeMax"
          format="YYYY-MM-DD HH:mm"
          enable-time-picker
        />
      </template>
      <template #endTime="{ data }">
        <lg-range-date
          v-model:start="data.endTimeMin"
          v-model:end="data.endTimeMax"
          format="YYYY-MM-DD HH:mm"
          enable-time-picker
        />
      </template>
      <!-- 工具栏 -->
      <template #toolbar-left>
        <!--        <lg-button-list :limit="$ToolBtnLimit">
          <btn-tool-add v-if="permits.create" @click="editRef.open()" />
          <btn-tool-remove v-if="permits.update" @click="remove()" />
          <btn-tool-export v-if="permits.export" @click="exports" />
          <template #trigger><btn-tool-more /></template>
        </lg-button-list>-->
      </template>
      <!-- 操作栏 -->
      <template #actionbar="{ row }">
        <lg-button-list :limit="$RowBtnLimit">
          <a @click="handle(row)">查看</a>
          <a @click="progress(row)">进度</a>
          <btn-row-remove v-if="!row.endTime" @click="revokeRef.open(row)">撤销</btn-row-remove>
        </lg-button-list>
      </template>
      <!-- 插槽 -->
    </lg-table>
  </table-container>
  <progress-modal ref="progressRef" />
  <revoke ref="revokeRef" />
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { formatStr, LgButtonList, LgTable, notEmpty, useComRef, useTable } from '@/soar';
import urlMappingApi from '@/pages/system/general/url-mapping/api';
import schema from './schema';
import api from '../api';
import { TableContainer } from '@/components';
import LgRangeDate from '@/soar/components/LgRangeDate/index.vue';
import ProgressModal from '../../process/monitor/Progress.vue';
import Revoke from '../../process/monitor/Revoke.vue';
import BtnRowRemove from '@/components/btns/RowRemove.vue';

const router = useRouter();
const progressRef = useComRef(ProgressModal);
const revokeRef = useComRef(Revoke);

const { tableProps } = useTable<any>({
  api: {
    query: api.started(),
  },
  props: {
    paramsHandle: false,
    actionbar: {
      width: 100,
    },
    immediate: true,
  },
});

function handle(row: any) {
  const bizType = row.processId.split(':')[0];
  urlMappingApi.getUrl('WEB-FLOW', bizType).then((res: any) => {
    notEmpty(res, '未能找到跳转路径，请配置路径映射');
    router.push(formatStr(res, row));
  });
}

function progress(row: any) {
  progressRef.value.open(row);
}
</script>

<style lang="less" scoped>
:deep(.lg-table-dict) {
  &.dict-value-0 {
    color: var(--app-color-primary);
    border-color: var(--app-color-primary);
  }
  &.dict-value-1 {
    color: var(--td-error-color-7);
    border-color: var(--td-error-color-7);
  }
  &.dict-value-2 {
    color: var(--td-success-color-7);
    border-color: var(--td-success-color-7);
  }
}
</style>
